﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3D Tracking</title>
    <link href="../../Content/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="../../Content/css/tracking3d.css" rel="stylesheet" />
    <link href="../../Content/css/dataTables.fixedHeader.min.css" rel="stylesheet" />
    <link href="../../Content/css/dataTables.scroller.min.css" rel="stylesheet" />
    <link href="../../Content/css/select2.css" rel="stylesheet" />
    <link href="../../Content/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../Content/css/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body>

    <div id="body" style=" width: 100%; ">
        <div style="text-align: center;margin: 5px">
            <span>钻孔编号：</span>
            <span id="holeIds" style=" width: 600px; margin-top: 0px; overflow:hidden"></span>
            <button id="btnShow" class="btn btn-primary">展示</button>
            <button id="btnRefresh" class="btn btn-primary">恢复默认</button>
            <!--<button id="btnReset" class="btn btn-primary">Reset</button>-->
        </div>

        <div id="container" style="width: 100%; height: 94%; position: relative; ">
            <div id="chartContainer" style=" width:20%;height:100%;position: absolute;display: none;">
                <div id="yzChart" style="height: 33%"></div>
                <div id="xyChart" style="height: 34%"></div>
                <div id="xzChart" style="height: 33%"></div>
            </div>
            <div id="dataContainer" style=" width:300px;height:auto;position: absolute;display: none;right: 0px;top: 20px; overflow:auto"></div>
        </div>

        <div id="tips" style="width: 240px; height: auto; position: absolute; z-index: 999999; display: none; color: #ffffff;">
            序号:017<br />坐标：70.00,77.13,50.00<br />时间：2014/5/13 10:35:03<br />孔深：0.00
        </div>
    </div>

    <footer>

        <!--        <script src="../js/libs/jquery-1.6.4.js"></script>-->
        <script src="../../Scripts/libs/jquery.js"></script>
        <script src="../../Scripts/libs/jquery.mousewheel.js"></script>
        <script src="../../Scripts/libs/Three.js"></script>
        <script src="../../Scripts/libs/RequestAnimationFrame.js"></script>
        <script src="../../Scripts/libs/stats.min.js"></script>
        <script src="../../Scripts/libs/jsUtils.js"></script>
        <script src="../../Scripts/libs/dat.gui.min.js"></script>
        <script src="../../Scripts/libs/canvasjs.min.js"></script>
        <script src="../../Scripts/libs/jquery.dataTables.min.js"></script>
        <script src="../../Scripts/libs/dataTables.fixedHeader.min.js"></script>
        <script src="../../Scripts/libs/select2.js"></script>
        <script src="../../Scripts/libs/bootstrap.min.js"></script>
        <script src="../../Scripts/controls/TrackballControls.js"></script>
        <script src="../../Scripts/controls/FirstPersonControls.js"></script>
        <script src="../../Scripts/controls/OrbitControls.js"></script>
        <script src="../../Scripts/sim/sim.js"></script>
        <script src="../../Scripts/three-helper.js"></script>

        <script src="js/tracking3d.js"></script>
        <script src="js/axis.js"></script>
        <script src="js/axis2d.js"></script>
        <script src="js/tracking.js"></script>
        <script src="js/plane.js"></script>
        <script src="js/pointSphere.js"></script>
        <script src="js/xyView.js"></script>
        <script src="js/xzView.js"></script>
        <script src="js/yzView.js"></script>

        <script src="../../Content/fonts/optimer_regular.typeface.js"></script>

        <script>

            var container = $("#container")[0];
            var app = new Tracking3DApp();
            app.init({
                container: container,
            });
            app.run();

            $(document).ready(function () {
                $('#body').css('height', $(window).height());
                var pageSize = 1; //查找5天的数据。
                $("#holeIds").select2({
                    placeholder: "请选择最多5个钻孔编号",
                    maximumInputLength: 10,
                    maximumSelectionSize: 5,
                    multiple: true,
                    ajax: {
                        dataType: 'jsonp',
                        quietMillis: 50,
                        //The url of the json service
                        url: "../../Controllers/DrillingDataController.ashx?cmd=GetHoleIds&Path=jiaodu",
                        //Our search term and what page we are on
                        data: function (term, page) {
                            return {
                                pageSize: pageSize,
                                pageNum: page,
                                searchTerm: term
                            };
                        },
                        results: function (data, page) {
                            var select2Results = [];
                            var d = $.parseJSON(data);
                            var more = (page * pageSize) < d.Total;
                            for (var i = 0; i < d.Results.length; i++) {
                                var item = d.Results[i];
                                var group = select2Results[item.Group];
                                if (!group) {
                                    group = { text: item.Group, children: [] };
                                }
                                for (var j = 0; j < item.Options.length; j++) {
                                    var option = item.Options[j];
                                    group.children.push({ id: option.id, text: option.text });
                                }

                                select2Results.push(group);
                            }

                            return {
                                results: select2Results, more: more
                            };
                        }
                    },
                    dropdownCssClass: "bigdrop",
                    escapeMarkup: function (m) { return m; }
                });
                $("#btnShow").click(function () {
                    var list = $("#holeIds").select2("val");
                    if (!list && list.length == 0) return;

                    $.getJSON("../../Controllers/DrillingDataController.ashx?cmd=GetHoleData&Path=jiaodu", { holeId: list }, function (result) {
                        app.show(result);
                    }).error(function (jqXHR, textStatus, errorThrown) {
                        console.log("error " + textStatus);
                        console.log("incoming Text " + jqXHR.responseText);
                    });
                });

                $("#btnReset").click(function () {
                    //app.controls.reset();
                });

                $("#btnRefresh").click(function () {
                    window.location.reload();
                    localStorage.clear();
                });

                $(window).resize(function () {
                    app.lookAtZero();
                });
            });

            $(window).resize(function () {
                $('#body').css('height', $(window).height());
            });
            
        </script>

    </footer>
</body>
</html>
